<script setup lang="ts">
import { onMounted, Ref, ref } from "vue";
import { SessionInfo, FaqItem, RoleEnum } from "@/models/@types.ts";
import { getUuid } from "@/utils/common.methods.ts";
import { appContext } from "@/models/app.context.ts";
import STS from './STS.vue'

// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

const voices = ref([] as SessionInfo[])

const voiceFile = ref(null as File)
const isMobil = ref(false as boolean)

onMounted(() => {
  isMobil.value = appContext.system.data.viewWidth < 1000;
})
const isSend = ref(false as boolean)

const chunk = ref('')

async function sendMessage(value: { blob: File, duration: number }, role: RoleEnum = RoleEnum.User): Promise<void> {
  if (!value) return;
  isSend.value = role == RoleEnum.User ? true : false;
  voiceFile.value = null;
  const session: SessionInfo = {
    uid: getUuid(),
    role,
    timestamp: Date.now(),
    richtext: '',
    audioFile: value.blob,
    duration: value.duration
  };
  voices.value.push(session)
}

const timbreoptions = ["alloy", "nova", "fable", "onyx"]
const speaker = ref('alloy')
const activeIndex = ref(0)
const onSwiper = (swiper) => {
  console.log('onSwiper', swiper);
};
const onSlideChange = (e) => {
  speaker.value = timbreoptions[e.activeIndex]
  console.log(e.activeIndex);
  activeIndex.value = e.activeIndex
};

const pagination: any = {
  clickable: true,
  renderBullet: (index: number, className: string) => {
    console.log(index);
    return '<span class="' + className + '"></span>';
  },
}
</script>
<template>
  <div class="voice">
    <p class="role_name">小问同学</p>
    <swiper :slides-per-view="1.2" :space-between="5" :centeredSlides="true" @swiper="onSwiper"
      @slideChange="onSlideChange" :pagination="pagination" :modules="[Pagination]">
      <swiper-slide name="alloy">
        <img src="@/assets/icons/voice/alloy.svg" alt="">
        <div class="blurred-image"></div>
      </swiper-slide>
      <swiper-slide name="nova">
        <img src="@/assets/icons/voice/nova.svg" alt="">
        <div class="blurred-image nova"></div>
      </swiper-slide>
      <swiper-slide name="fable">
        <img src="@/assets/icons/voice/fable.svg" alt="">
        <div class="blurred-image fable"></div>
      </swiper-slide>
      <swiper-slide name="onyx">
        <img src="@/assets/icons/voice/onyx.svg" alt="">
        <div class="blurred-image onyx"></div>
      </swiper-slide>
    </swiper>

    <div class="flex bottom">
      <STS :speaker="speaker" @update:send="(value) => sendMessage(value, RoleEnum.User)"
        @update:receive="(value) => sendMessage(value, RoleEnum.AI)" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.voice {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-2);
  color: var(--color-text-2);
  height: 100vh;

  .role_name {
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 16px;
    color: var(--color-text-1);
    font-weight: bold;
  }

  .swiper {
    width: 100%;
    height: calc(100vh - 224px);

    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;

      img {
        width: 212px;
        height: 212px;
        object-fit: cover;
        border-radius: 4px;
      }
    }

    .blurred-image {
      position: absolute;
      width: 100vw;
      height: 100vh;
      background-size: cover;
      filter: blur(20px);
      z-index: -1;
    }
  }


  .bottom {
    height: 100px;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    .voice-btn {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
<style lang="scss">
.voice {

  .swiper-pagination-fraction,
  .swiper-pagination-custom,
  .swiper-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: auto;
    top: 0;
    left: 0;
    width: 100%;
  }

  .swiper-pagination-bullet {
    background-color: var(--color-text-2);

    &.swiper-pagination-bullet-active {
      margin: 0 4px;
      width: 16px;
      height: 8px;
      border-radius: 4px;
      background: var(--swiper-pagination-color, var(--swiper-theme-color));
    }
  }

}
</style>